<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>知我药妆</title>
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="font_571425_cjvso7da05wv1jor/iconfont.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/footer.css">
    <script src="jq/jquery-1.11.1.min.js"></script>
    <script src="js/amazeui.lazyload.js"></script>
    <script src="jq/jquery.fly.min.js"></script>
    <script src="js/Cookie.jQuery.1.0.js"></script>
</head>
<body>
<div class="public_header"></div>
<script src="js/header.js"></script>



<div class="playimages">
    <ul class="f_img">
        <li class="" style="z-index: 1; opacity: 1;"><a href="" target="_blank" style="background: url(images/nav1.jpg) no-repeat center top">
        </a></li>
        <li class="" style="z-index: 0; opacity: 1;"><a href="" target="_blank" style="background: url(images/nav2.jpg) no-repeat center top">
        </a></li>
        <li class="" style="z-index: 0; opacity: 1;"><a href="" target="_blank" style="background: url(images/nav3.jpg) no-repeat center top">
        </a></li>
        <li class="" style="z-index: 0; opacity: 1;"><a href="" target="_blank" style="background: url(images/nav4.jpg) no-repeat center top">
        </a></li>
        <li class="" style="z-index: 0; opacity: 1;"><a href="" target="_blank" style="background: url(images/nav5.jpg) no-repeat center top">
        </a></li>
    </ul>
    <ul class="pointer">
        <li style="background: #00c8ff"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

<div class="content">
    <div class="main">
        <h1>
            <span>今日头条</span>
            <i>TODAY HEADLINES</i>
        </h1>
        <div class="content_top">
            <ul>

            </ul>
        </div>

        <div class="brand_b_nav" id="tou">
            <ul class="clearfix fl">
                <li class="bbn_current"><span>畅销品牌</span><i style="display: block"></i></li>
                <li><span>欧美品牌</span><i></i></li>
                <li><span>日韩品牌</span><i></i></li>
                <li><span>国内品牌</span><i></i></li>
            </ul>
            <div class="bbn_allbrand fr"><a href="http://www.zhiwo.com/brand" target="_blank">全部品牌+</a></div>
        </div>
        <div class="siblings">
        <div class="zuo"><</div>
        <div class="you">></div>
        <div class="brand_b_nav_page" style="display: block" id="page1">
            <div class="brand_b_nav_page_left">
                <ul>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                    <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
                </ul>
            </div>
            <div class="brand_b_nav_page_right">
                <a href=""><img src="images/brand-nav2.jpg" alt="" width="100%" height="100%"></a>
            </div>
        </div>
        <div class="brand_b_nav_page" id="page2">
        <div class="brand_b_nav_page_left">
        <ul>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav1.jpg" alt="" width="100%" height="100%"></a></li>
        </ul>
        </div>
        <div class="brand_b_nav_page_right">
        <a href=""><img src="images/brand-nav2.jpg" alt="" width="100%" height="100%"></a>
        </div>
        </div>
        <div class="brand_b_nav_page" id="page3">
        <div class="brand_b_nav_page_left">
        <ul>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav3.jpg" alt="" width="100%" height="100%"></a></li>
        </ul>
        </div>
        <div class="brand_b_nav_page_right">
        <a href=""><img src="images/brand-nav2.jpg" alt="" width="100%" height="100%"></a>
        </div>
        </div>
        <div class="brand_b_nav_page" id="page4">
        <div class="brand_b_nav_page_left">
        <ul>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        <li><a href=""><img class="lazy" src="images/brand-nav.jpg" alt="" width="100%" height="100%"></a></li>
        </ul>
        </div>
        <div class="brand_b_nav_page_right">
        <a href=""><img src="images/brand-nav2.jpg" alt="" width="100%" height="100%"></a>
        </div>
        </div>
    </div>

        <div class="hot_today">
            <h2><p><span>今日新品</span><i>HOT DEALS TODAY</i></p></h2>
            <div class="n_list">
                <ul>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="public_footer"></div>
<script src="js/footer.js"></script>
<div class="sidebox">
    <div class="sidebox_pane1">
        <ul class="sidebox_pane1_one">
            <li class="sidebox_span1">
                <span></span>
                <div class="hover_box">
                    <a href="">登录</a>
                    <i style="font-style: normal;margin-left: 8px;color: #fff" class="fl">|</i>
                    <a href="" class="fr">注册</a>
                </div>
            </li>
            <li class="sidebox_span2">
                <span class="sidebox_span2_1"></span>
                <span class="sidebox_span2_2">购物车</span>
                <span class="sidebox_span2_3">0</span><div></div>
            </li>
            <li><span class="sidebox_span3_1"></span><div class="hover_box"><a href="">&nbsp;&nbsp;&nbsp;我的收藏</a></div></li>
            <li><span class="sidebox_span4_1"></span><div class="hover_box"><a href="">&nbsp;&nbsp;&nbsp;我的足迹</a></div></li>
            <li><span style="color: #fff">top</span><div></div></li>
        </ul>
    </div>
    <div class="sidebox_content">
        <div class="sidebox_content_top">
            <h2>
                <span>我的购物车</span>
                <i id="xiaoshi">></i>
            </h2>
            <!--<div class="shopgoods_empty">-->
                <!--<p class="shopgoods_empty_img"></p>-->
                <!--<p class="shopgoods_empty_p1">购物车为空</p>-->
                <!--<p class="shopgoods_empty_p2">请挑选心爱的商品吧！</p>-->
            <!--</div>-->
        <div class="shopgoods_list_cont">
            <div class="shopgoods_list">
                <div class="message_list">
                    <ul class="iscroll_cont">
                        <li>
                            <div class="gg_img">
                                <a href=""><img src="images/gg_img1.jpg" alt=""></a>
                            </div>
                            <div class="gg_info">
                            <p class="gg_info_p"><a href="">后拱辰享人参蜂蜜面膜单片1ml*10片</a></p>
                              <div class="gg_info_jiajian">
                                  <span>￥39.9</span>
                                  <p class="gg_info_jiajian_jj">
                                      <span>-</span>
                                      <input type="text" value="1">
                                      <span>+</span>
                                  </p>
                                  <a class="gg_info_del" href="">删除</a>
                              </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="Settlement">
                <p class="Settlement_jianshu">
                    共
                    <span>1</span>
                    件商品
                </p>
                <p class="Settlement_gongji">
                    共计
                    <span>￥</span>
                    <em>39.90</em>
                </p>
                <p class="Settlement_gobuy"><a href="">去购物车结算</a></p>
            </div>
        </div>
        </div>
    </div>
</div>
</body>
</html>

<script src="js/index.js"></script>
<script src="js/shopcar.js"></script>
<script>
    $(function () {
         index=-1;
        function play() {
            index++;
            if (index>4){
                index=0;
            }
            $(".f_img li").eq(index).css("z-index","3").siblings().css("z-index","0");
            $(".pointer li").eq(index).css("background","#00c8ff").siblings().css("background","#6c6c6c");

        }

        var timer=setInterval(function () {
            play();
        },1000);
        $(".pointer li").mouseover(function () {
            clearInterval(timer);
        })
//        for(var i=0;i<$(".pointer li").length;i++){
//            $(".pointer li").eq(i).mouseover(function () {
//                clearInterval(timer)
//                index=i;
//          })
//    }
        $(".pointer li").mouseout(function () {
            timer=setInterval(function () {
                play();
            },1000);
        })
        $(".brand_b_nav li").click(function () {
            $(this).addClass("bbn_current").find("i").css("display","block")
                .parent("li").siblings().removeClass("bbn_current").find("i").css("display","none");
            var index=$(this).index();
            $(".siblings").find(".brand_b_nav_page").eq(index).css("display","block").siblings().css("display","none");
        })
//        $(".zuo").click(function () {
//            if($(".bbn_current").index("li")==0)(
//                $(".bbn_current").eq(3).addClass("bbn_current").find("i").css("display","block")
//                    .parent("li").siblings().removeClass("bbn_current").find("i").css("display","none")
//            )else {
//
//            }
//
//        })
        $(".hover_box").parent("li").on("mouseover",function () {
            $(this).find("div").stop().show().stop().animate({"left":"-83px"},500).css("background","#0094ff");
        })
        $(".hover_box").parent("li").on("mouseout",function () {
            $(this).find("div").stop().hide().stop().animate({"left":"-95px"},500).css("background","#0094ff");
        })
        $(".sidebox_span2").click(function () {
            $(".sidebox_content").animate({"left":"-300px"},500);
        })
        $(".sidebox_span2").siblings().click(function () {
            $(".sidebox_content").animate({"left":"35px"},500);
        })
        $("#xiaoshi").click(function () {
            $(".sidebox_content").animate({"left":"35px"},500);
        })
        //side的js

        $(".n_list_img").mouseover(function () {
            $(this).find($(".hover_a")).show();
            $(this).find("img").css("opacity","0.8")
        })
        $(".n_list_img").mouseout(function () {
            $(this).find($(".hover_a")).hide();
            $(this).find("img").css("opacity","1")
        })

        //懒加载
        $("img.lazy").lazyload({
            placeholder : "images/loding.gif",
            effect : 'fadeIn',
            threshold : 200,
            failure_limit : 10
        });

    })

</script>